import { Namespace } from '@ibiz-template/core';
import { debounce } from 'lodash-es';
import { VNode } from 'vue';
import { ExpBarControlController } from './exp-bar.controller';

/**
 * 导航栏绘制工具（标题，快速搜索）
 * @author lxm
 * @date 2023-08-02 08:06:38
 * @export
 * @param {ExpBarControlController} c
 * @param {Namespace} ns
 * @return {*}  {({ renderTitle: () => VNode | null; renderQuickSearch: () => VNode | null })}
 */
export function useExpBarRender(
  c: ExpBarControlController,
  ns: Namespace,
): { renderTitle: () => VNode | null; renderQuickSearch: () => VNode | null } {
  const debounceSearch = debounce(() => {
    c.load();
  }, 500);

  const onInput = (value: string): void => {
    c.state.query = value;
    debounceSearch();
  };

  const renderTitle = (): VNode | null => {
    const { model } = c;
    if (!model.showTitleBar) {
      return null;
    }
    return (
      <div class={[ns.b('caption')]}>
        {model.sysImage && (
          <iBizIcon
            class={[ns.be('caption', 'icon')]}
            icon={model.sysImage}
          ></iBizIcon>
        )}
        {model.title && (
          <span class={[ns.be('caption', 'text')]}>{model.title}</span>
        )}
      </div>
    );
  };

  const renderQuickSearch = (): VNode | null => {
    const { model } = c;
    if (!model.enableSearch) {
      return null;
    }
    return (
      <el-input
        model-value={c.state.query}
        class={ns.b('quick-search')}
        placeholder='搜索项'
        onInput={onInput}
      >
        {{
          prefix: (): VNode => {
            return <ion-icon class={ns.e('search-icon')} name='search' />;
          },
        }}
      </el-input>
    );
  };

  return { renderTitle, renderQuickSearch };
}
